<template>
  <div class="recommend-banner">
    <div class="big-img" :style="{background: `url(${currentImg})`}"></div>
    <div class="main">
      <n-carousel
        autoplay
        trigger="hover"
        :default-index="0"
        v-model:current-index="current"
      >
        <template v-for="item in imgList" :key="item">
          <img class="carousel-img" :src="item.imageUrl" />
        </template>
      </n-carousel>
      <div class="download"></div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch, onMounted, computed } from 'vue'
import { useStore } from 'vuex'

import { NCarousel } from 'naive-ui'

export default defineComponent({
  components: {
    NCarousel
  },
  setup() {
    const store = useStore()
    const current = ref(0)
    const currentImg = ref()

    onMounted(() => {
      store.dispatch('searchMusic/getBannersAction')
      setTimeout(() => {
        currentImg.value = store.state.searchMusic.firstBanner
      }, 10)
    })

    const imgList = computed(() => store.state.searchMusic.banner)

    watch(current, (newValue) => {
      currentImg.value =
        imgList.value[newValue].imageUrl + '?imageView&blur=40x20'
    })
    return {
      current,
      imgList,
      currentImg
    }
  }
})
</script>

<style scoped lang="less">
.recommend-banner {
  width: 100%;
  height: 220px;
  position: relative;
  .big-img {
    position: absolute;
    width: 100%;
    height: 100%;
    background-position: center;
  }
  .main {
    width: 55%;
    height: 100%;
    position: absolute;
    z-index: 999;
    left: 50%;
    display: flex;
    transform: translateX(-50%);
    .n-carousel {
      width: 70%;
      height: 100%;
      .carousel-img {
        width: 100%;
        height: 100%;
      }
    }
    .download {
      width: 30%;
      height: 100%;
      background: url('../../../assets/download2.png');
      background-position: center;
    }
  }
}
@media screen and (max-width: 800px) {
  .search-music-banner .main {
    width: 90%;
  }
}
@media screen and (max-width: 1230px) {
  .search-music-banner .main {
    width: 75%;
  }
}
</style>
